<template>
	<view class="container">
		<view class="content" v-if="taskSum">
			<view class="row">
				<view class="line">
					<u-tag :text="onTask.lineName"></u-tag>
					<!-- <u-badge type="error" :absolute="true" :offset="[-5, -5]" max="99" :value="onTaskSum"></u-badge> -->
				</view>
				<!-- <view class="row-tip">
				<u-tag class="tip-a" text="报国寺车站" plain></u-tag>
				<text class="tip-m">--</text>
				<u-tag class="tip-b" text="万年寺车站" plain></u-tag>
				<text class="tip-m">--</text>
				<u-tag class="tip-a" text="报国寺车站" plain></u-tag>
				</view> -->
				<scroll-view scroll-x scroll-left="0">
					<view class="step" :style="'width:' + stepWidth">
						<u-steps current="1" dot>
							<u-steps-item :title="item.name" v-for="(item, index) in onTask.stations" :key="index">
								<view
									class="slot-icon"
									:class="
										item.status >= 30
											? 'slot-left'
											: item.status == 0 && ((index > 0 && onTask.stations[index - 1].status < 30) || (index == 0 && false))
											? 'slot-right'
											: 'slot-mid'
									"
									slot="icon"
								></view>
							</u-steps-item>
						</u-steps>
					</view>
				</scroll-view>
			</view>
			<view class="body">
				<view class="cell">
					<view class="cell-lab">
						<view class="cell-spot">
							<text class="spot-tip">当前站点：</text>
							<view class="spot-text" @click="isShowSpot = true">
								<text class="spot-text-font">{{ curSpot.name }}</text>
								<u-icon name="arrow-down-fill" color="#ffffff" size="18"></u-icon>
							</view>
						</view>
						<view class="cell-spot">
							<text class="spot-tip">车辆信息：</text>
							<text>{{ onTask.plateNumber }}</text>
							<text class="cell-right">{{ onTask.driverName }}</text>
						</view>
						<view class="cell-spot">
							<text class="spot-tip">签到时间：</text>
							<text>{{ curSpot.driverTime }}</text>
						</view>
					</view>
					<view class="cell-btn" @click="spotSign">
						<view class="btn-sign" :style="'background-color:' + (curSpot.status == 0 || curSpot.status == 1 ? '#3c9cff' : '#d1d1d1')">
							<text>站点签到</text>
							<text>{{ strTime }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="footer">
				<view class="menu">
					<view class="menubg menu-1" :style="'background-color:' + (curSpot.checkOutTime ? '#3c9cff' : '#d1d1d1')" @click="countSign">
						<view class="menu-icon">
							<u-icon name="level" color="#ffffff" size="28"></u-icon>
						</view>
						<view class="menu-text">电子路单签字</view>
					</view>
				</view>
				<view class="menu">
					<view class="menubg menu-2" :style="'background-color:' + (curSpot.securityTime ? '#3c9cff' : '#d1d1d1')" @click="checkSign">
						<view class="menu-icon">
							<u-icon name="level" color="#ffffff" size="28"></u-icon>
						</view>
						<view class="menu-text">出站安检签字</view>
					</view>
				</view>
				<view class="menu">
					<view
						class="menubg menu-3"
						:style="'background-color:' + (onTask.status != 0 && onTask.status != 1 && onTask.status != 4 && onTask.status != 9 ? '#3c9cff' : '#d1d1d1')"
						@click="lastSpotSign"
					>
						<view class="menu-icon">
							<u-icon name="coupon-fill" color="#ffffff" size="28"></u-icon>
						</view>
						<view class="menu-text">末站签退</view>
					</view>
				</view>
				<view class="menu">
					<view class="menubg menu-4" @click="repairTip">
						<view class="menu-icon">
							<u-icon name="setting-fill" color="#ffffff" size="28"></u-icon>
						</view>
						<view class="menu-text">车辆报修</view>
					</view>
				</view>
			</view>
			<view class="groupbox">
				<view class="grouptitle">
					<text>签到记录</text>
				</view>
				<view class="groupcontent">
					<view v-for="(item, index) in footLog" :key="index" class="tag-tip">
						<u-tag :text="index + 1 + '-' + item" type="success" plain></u-tag>
					</view>
				</view>
			</view>
		</view>
		<empty class="content" v-else :text="taskSum>0?'今日无排班':'今日排班已完成'"></empty>
		<tabBar></tabBar>
		<u-popup :show="isShowSpot" @close="isShowSpot = false">
			<view class="popup-user">
				<view class="header" @click="selectSpot(item)" v-for="(item, index) in onTask.stations" :key="index">
					<view class="row">
						<view class="line">
							<u-tag :text="'站点：' + item.name"></u-tag>
						</view>
						<view class="row-tip">
							<view class="cell">
								<text class="cell-title">联系人：</text>
								<text class="cell-content">{{ item.linkman }}</text>
								<text class="cell-content">{{ item.phone }}</text>
							</view>
							<view class="cell">
								<text class="cell-title">站点备注：</text>
								<text class="cell-content">{{ item.remark }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import tabBar from '@/components/tabBar.vue';
import empty from '@/components/empty.vue';
import common from '@/utils/common.js';
import date from '@/utils/date.js';
import signjs from '@/api/sign.js';
import globaljs from '@/api/global.js';
import wxLogin from '@/utils/wxLogin.js';
export default {
	data() {
		return {
			stepWidth: '100%', //路线控件宽度
			footLog: [], //签到记录
			timer: null, //时间控件计时器
			strTime: '', //时间文本
			taskTimer: null, //实时任务刷新数据计时器
			coorTimer: null, //坐标计时器
			todayTask: null, //当天所有排班
			onTask: null, //实时排班
			onTaskID: 0, //实时排班ID
			taskSum: 0, //当天排班数
			onTaskSum: 0, //当天排班数未完成
			curSpot: null, //当前站点
			isShowSpot: false, //是否显示站点选择
			isOnTask: true, //任务是否是实时的
			isOnSpot: true, //当前站点是否是实时的
			x: 0,
			y: 0,
			coorAccess: false
		};
	},
	computed: { ...mapGetters(['token']) },
	async onPullDownRefresh() {
		await this.todayOrders();
		if (this.isOnTask) {
			let res = await this.refreshTask();
			if (!res) return;
		}
		if (this.isOnSpot) {
			this.refreshSpot();
		}
		this.refreshLog();
		this.isOnTask = true;
		this.isOnSpot = true;
		//获取位置授权
		this.coorAccess = await wxLogin.checkLocation();
		uni.stopPullDownRefresh();
		uni.showToast({
			icon: 'none',
			title: '刷新成功',
			duration: 300
		});
	},
	async onShow() {
		await this.todayOrders();
		if (this.isOnTask) {
			let res = await this.refreshTask();
			if (!res) return;
		}
		if (this.isOnSpot) {
			this.refreshSpot();
		}
		this.refreshLog();
		this.isOnTask = true;
		this.isOnSpot = true;
		//获取位置授权
		this.coorAccess = await wxLogin.checkLocation();
	},
	onLoad() {
		// #ifdef MP
		//未登录转登录页面，已登录转主页面
		if (!this.$store.dispatch('checkIndentity')) return;
		// #endif
		// #ifndef MP
		uni.hideTabBar();
		// #endif
		this.timer = setInterval(() => {
			this.strTime = date.formatDate(new Date(), 5);
		}, 1000);
		this.coorTimer = setInterval(() => {
			this.getCoor();
		}, 10000);
		// this.taskTimer = setInterval(() => {
		// 	this.onTimeTask();
		// }, 5000);
	},
	destroyed() {
		clearInterval(this.timer);
		clearInterval(this.coorTimerssss);
	},
	components: {
		tabBar,
		empty
	},
	methods: {
		async getCoor() {
			if (this.coorAccess) {
				var ret = await wxLogin.getLocation();
				if (ret.code == 0) {
					this.x = ret.json.longitude;
					this.y = ret.json.latitude;
				}
			}
		},
		async refreshPage() {
			await this.todayOrders();
			await this.refreshTask();
			this.refreshSpot();
			this.refreshLog();
		},
		selectSpot(item) {
			this.curSpot = item;
			this.isShowSpot = false;
		},
		async refreshTask() {
			//加载实时线路
			let token = this.token;
			let res = await signjs.onTimeTask(token);
			if (common.httpIsWrong(res)) {
				if (this.taskSum > 0) {
					this.onTask = this.todayTask[0];
					this.onTaskID = 0;
					return true;
				} else {
					return false;
				}
			}
			this.onTask = res.json.data.data;
			this.onTaskID = this.onTask.id;
			return true;
		},
		refreshSpot() {
			//当前站点
			for (let i = 0; i < this.onTask.stations.length; i++) {
				let oneStation = this.onTask.stations[i];
				if (oneStation.status <= 3) {
					this.curSpot = oneStation;
					break;
				}
			}
			if (!this.curSpot) this.curSpot = this.onTask.stations[this.onTask.stations.length - 1];
		},
		refreshLog() {
			//签到记录
			this.footLog = [];
			this.footLog.push(this.x);
			this.footLog.push(this.y);
			for (let i = 0; i < this.onTask.stations.length; i++) {
				let oneStation = this.onTask.stations[i];
				if (oneStation.status >= 3 || oneStation.status == 2) {
					this.footLog.push(oneStation.name + '【' + oneStation.driverTime + '】');
				}
			}
		},
		async todayOrders() {
			let res = await globaljs.getHistoryOrders(date.formatDate(new Date(), 0), this.token);
			if (common.httpIsWrong(res)) return;
			let tasks = res.json.data.data;
			this.todayTask = tasks;
			this.taskSum = tasks.length;
			let onSum = 0;
			for (let i = 0; i < tasks.length; i++) {
				if (tasks[i].status != 4 && tasks[i].status != 9) {
					onSum++;
				}
			}
			this.onTaskSum = onSum;
		},
		selectRoute() {
			this.isOnTask = false;
			uni.navigateTo({
				url: '/pages/route/route'
			});
		},
		lastSpotSign() {
			if (this.taskSum > 0 && this.onTask.id != this.onTaskID) {
				uni.$u.toast('当前有排班未结束，不能签退其他排班');
				return;
			}
			if (this.onTask.status == 4 || this.onTask.status == 9) {
				uni.$u.toast('当前排班任务已结束，无需签退');
				return;
			}
			if (this.onTask.status == 0 || this.onTask.status == 1) {
				uni.$u.toast('当前排班任务未开始，无需签退');
				return;
			}
			let that = this;
			uni.showModal({
				title: '提示',
				content: '末站签到：您确定结束此次路单吗',
				cancelText: '点错了',
				confirmText: '签到',
				success: async function (res) {
					if (res.confirm) {
						let param = {
							id: that.curSpot.id,
							stationId: that.curSpot.stationId,
							taskId: that.onTask.id,
							token: that.token,
							type: 4,
							lat: '',
							lon: ''
						};
						let res = await signjs.driverSign(param);
						if (common.httpIsWrong(res)) return;
						await that.refreshPage();
						uni.$u.toast('末站签到成功,此次行程结束');
					}
				}
			});
		},
		spotSign() {
			if (this.onTask.id != this.onTaskID) {
				uni.$u.toast('当前有排班未结束，不能签到其他排班');
				return;
			}
			if (this.curSpot.status != 0 && this.curSpot.status != 1) {
				uni.$u.toast('已经签到，不能再签');
				return;
			}
			let that = this;
			uni.showModal({
				title: '提示',
				content: this.curSpot.name + '：确定签到吗',
				cancelText: '点错了',
				confirmText: '签到',
				success: async function (res) {
					if (res.confirm) {
						let param = {
							id: that.curSpot.id,
							stationId: that.curSpot.stationId,
							taskId: that.onTask.id,
							token: that.token,
							type: 1,
							lat: '',
							lon: ''
						};
						let res = await signjs.driverSign(param);
						if (common.httpIsWrong(res)) return;
						await that.refreshPage();
						uni.$u.toast('签到成功');
						that.footLog.push(that.curSpot.name + '【' + that.curSpot.driverTime + '】');
					}
				}
			});
		},
		repairTip() {
			this.isOnTask = false;
			this.isOnSpot = false;
			let taskid = 0,
				isWork = 0;
			if (this.onTask.status == 2 || this.onTask.status == 3) {
				taskid = this.onTask.id;
				isWork = 1;
			}
			uni.navigateTo({
				url: '/pages/wrong/wrong?taskId=' + taskid + '&isWork=' + isWork
			});
		},
		countSign() {
			this.isOnTask = false;
			this.isOnSpot = false;
			if (!this.curSpot.checkOutTime) {
				uni.$u.toast(this.curSpot.name + '：当前没有可签电子路单');
				return;
			}
			uni.navigateTo({
				url: '/pages/security/security?id=' + this.curSpot.id
			});
		},
		checkSign() {
			this.isOnTask = false;
			this.isOnSpot = false;
			if (!this.curSpot.securityTime) {
				uni.$u.toast(this.curSpot.name + '：当前没有可签出站安检单');
				return;
			}
			uni.navigateTo({
				url: '/pages/securityout/securityout?id=' + this.curSpot.id
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: white;
	.popup-user {
		.header {
			width: 100%;
			height: auto;
			background-color: white;
			.row {
				margin: 20rpx;
				align-items: center;
				border: solid 1rpx #3c9cff;
				border-radius: 10rpx;
				background-color: #f1f2f4;
				.line {
					width: 100%;
					position: relative;
				}
				.row-tip {
					margin: 10rpx 20rpx;
					display: flex;
					flex-direction: column;
					.tip-m {
						color: #3c9cff;
					}
					.cell {
						padding: 10rpx 0;
						display: flex;
						.cell-title {
							letter-spacing: 10rpx;
							font-size: 28rpx;
						}
						.cell-content {
							letter-spacing: 10rpx;
							font-size: 28rpx;
							color: #1a90e4;
							margin: 0 20rpx;
						}
						.cell-content2 {
							font-size: 28rpx;
							color: #1a90e4;
							margin: 0 20rpx;
						}
						.cell-row-left {
							width: 40%;
						}
						.cell-row-right {
							flex: 1;
						}
						.cell-row {
							width: 50%;
						}
					}
				}
			}
		}
	}
	.content {
		height: 100%;
		flex: auto;
		display: flex;
		flex-direction: column;
		background-color: white;
		overflow: scroll;
		.row {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx 20rpx;
			border: solid 1rpx #3c9cff;
			border-radius: 10rpx;
			.line {
				width: 100%;
				position: relative;
			}
			.row-tip {
				margin: 10rpx 20rpx;
				display: flex;
				align-items: center;
				.tip-m {
					color: #3c9cff;
				}
			}
		}
		.step {
			height: auto;
			background-color: white;
			display: flex;
			min-width: 100%;
			padding: 10rpx 0;
			border-radius: 10rpx;
			.slot-icon {
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
			}
			.slot-left {
				background-color: #969799;
			}
			.slot-right {
				background-color: #00ff7f;
			}
			.slot-mid {
				background-color: #ff0000;
			}
		}
		.body {
			flex: 1;
			flex-direction: column;
			align-items: center;
			.cell {
				display: flex;
				background-color: #a5d9f8;
				justify-content: space-around;
				margin: 0 20rpx;
				padding: 10rpx 0;
				border-radius: 10rpx;
				.cell-lab {
					padding-left: 20rpx;
					width: 65%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					font-size: 30rpx;
					.cell-spot {
						display: flex;
						align-items: center;
						.cell-left {
							margin-right: 20rpx;
						}
						.cell-right {
							margin-left: 20rpx;
						}
						.spot-tip {
						}
						.spot-text {
							display: flex;
							justify-content: center;
							align-items: center;
							color: white;
							background-color: #3c9cff;
							border-radius: 10rpx;
							padding: 5rpx 10rpx;
							.spot-text-font {
								margin-right: 5rpx;
							}
						}
					}
				}
				.cell-btn {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.btn-sign {
						width: 200rpx;
						height: 200rpx;
						border-radius: 50%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						color: white;
						box-shadow: 0 0 5rpx 3rpx #b6fcc2;
					}
				}
			}
		}
		.footer {
			margin: 15rpx 20rpx;
			height: auto;
			border: thin solid #a5d9f8;
			padding: 10rpx 10rpx;
			border-radius: 10rpx;
			display: flex;
			flex-flow: row wrap;
			.menu {
				width: 50%;
				.menubg {
					margin: 10rpx 10rpx;
					height: 150rpx;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					.menu-icon {
						width: 80rpx;
						display: flex;
						justify-content: flex-end;
					}
					.menu-text {
						flex: 1;
						font-weight: bold;
						color: white;
						font-size: 30rpx;
						text-align: right;
						display: flex;
						justify-content: center;
					}
				}
				.menu-1 {
					background-color: #3c9cff;
				}
				.menu-2 {
					background-color: #3c9cff;
				}
				.menu-3 {
					background-color: #3c9cff;
				}
				.menu-4 {
					background-color: #3c9cff;
				}
				.menu-gray {
					background-color: #1a90e4;
				}
			}
		}
		.groupbox {
			margin: 15rpx 20rpx;
			height: auto;
			border: thin solid #a5d9f8;
			padding: 20rpx;
			position: relative;
			border-radius: 10rpx;
			.grouptitle {
				position: absolute;
				height: 30rpx;
				margin-top: -38rpx;
				margin-left: 20rpx;
				text-align: center;
				font-size: 26rpx;
				padding: 0 10rpx;
				background-color: white;
				color: #1a90e4;
			}
			.groupcontent {
				width: 100%;
				height: 100%;
				display: flex;
				flex-flow: row wrap;
				.tag-tip {
					margin: 2rpx 5rpx;
				}
			}
		}
	}
}
::v-deep .u-text__value {
	writing-mode: vertical-lr;
	flex: auto;
}
::v-deep .u-slide-up-enter-active {
	height: 60%;
	overflow: scroll;
}
</style>
